<template>
  <div class="wiki-page flex-col">
    <div class="block_1 flex-col">
      <div class="wiki-page-header flex-row justify-end">
        <div class="header-text-wrapper flex-col justify-between">
          <span class="header-text-wrapper-text-top">3D虚拟仿真物理实验</span>
          <span class="header-text-wrapper-text-botton"
            >Hello，欢迎使用-教学实验虚拟仿真智慧云平台</span
          >
        </div>
        <div class="image-wrapper_1 flex-col">
          <img
            class="image_1"
            referrerpolicy="no-referrer"
            src="/lanhu/SketchPngbc8906ec746f2e4a9a598e18a000b04be67cf64791f8e2b7d4dd5d05f927f61e.png"
          />
        </div>
        <div class="block_2 flex-col">
          <div class="image-wrapper_2 flex-row">
            <img
              class="image_2"
              referrerpolicy="no-referrer"
              src="/lanhu/SketchPng733ac6245dd072a8d52bd02137db135712ff9072c4de3676572dd90bdafc1382.png"
            />
          </div>
          <div class="header-section flex-row justify-between">
            <span class="text">高效助学</span>
            <div class="thumbnail"></div>
            <span class="text">可视化指导</span>
            <div class="thumbnail"></div>
            <span class="text">实时反馈</span>
          </div>
          <div class="section_2 flex-row">
            <div class="box_4 flex-row">
              <div
                class="image-text_1 flex-row justify-between"
                @click="handleGoLogin"
              >
                <span class="text-group_1">了解更多</span>
                <img
                  class="thumbnail_3"
                  referrerpolicy="no-referrer"
                  :src="arrows"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="search-box">
        <a-input-group class="search-box-input-group" compact>
          <a-select
            class="search-box-select"
            v-model:value="experimentCategoryValue"
          >
            <a-select-option
              v-for="item in experimentCategoryeList"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
          <a-input
            class="search-box-input"
            v-model:value="inputStr"
            allow-clear
            placeholder="请输入搜索关键词"
          />
          <a-button
            class="search-box-button"
            :icon="h(SearchOutlined)"
            type="primary"
            @click="getExperimentPagedList"
            >搜索</a-button
          >
        </a-input-group>
      </div>
      <div class="tag-group">
        <div
          class="text-wrapper flex-col"
          :class="{ active: tagActives.includes(item.experiment_category_id) }"
          v-for="(item, index) in tagList"
          :key="item.experiment_category_id"
          @click="handleChoose(item)"
        >
          <span class="text">{{ item.name }}</span>
        </div>
      </div>
      <div class="text-wrapper_17 flex-row justify-between">
        <span class="text_26">热门实验</span>
        <span class="text_27">研究光的行为和性质</span>
      </div>
      <div class="grid_1 flex-row">
        <div
          class="list-items_1 flex-col"
          v-for="(item, index) in tableData"
          :key="index"
          @click="handleGoLogin"
        >
          <div class="image-text_12 flex-col justify-between">
            <div class="group_12 flex-row justify-between">
              <!-- <div class="text-wrapper_33 flex-col">
                <span class="text_59" v-html="item.lanhutext0"></span>
              </div>
              <div class="box_15 flex-col" :style="{ background: item.lanhuBg4 }">
                <div class="text-wrapper_34 flex-col">
                  <span class="text_60" v-html="item.lanhutext1"></span>
                </div>
              </div>
              <div class="box_16 flex-col">
                <span class="text_61" v-html="item.lanhutext2"></span>
                <img class="image_7" referrerpolicy="no-referrer" :src="item.lanhuimage0" />
              </div> -->
              <img
                class="image_7"
                referrerpolicy="no-referrer"
                :src="item.thumb_url"
              />
            </div>
            <span class="text-group_12" v-html="item.name"></span>
          </div>
          <div class="text-wrapper_35 flex-col">
            <!-- <span class="text_62" v-html="item.objective"></span> -->
            <div class="text_62" v-html="item.objective"></div>
          </div>
          <div class="section_3 flex-row">
            <div class="image-text_13 flex-row justify-between">
              <!-- <img class="label_9" referrerpolicy="no-referrer" :src="item.lanhuimage1" />
              <span class="text-group_13" v-html="item.lanhutext5"></span> -->
              良益科技
            </div>
            <span class="text_63" v-html="item.lanhutext6"></span>
            <span class="text_64">
              {{ item.experiment_category_name }}
            </span>
          </div>
        </div>
      </div>
      <div class="text-wrapper_36 flex-col" @click="handleGoLogin">
        <span class="text_65">查看全部实验</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { h } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { onMounted } from "vue";
import API from "@/api/home";
import arrows from "../../../../public/icons/arrows.png";
const router = useRouter();
const tagActives = ref([1, 2, 3]);
const experimentCategoryValue = ref("全部");
const inputStr = ref("");
const experimentCategoryeList = ref<any>([
  {
    label: "全部",
    value: "全部",
  },
]);

//获取实验分类
const getExperimentCategoryOptions = async () => {
  let params = {
    keyWords: "",
  };
  const res = await API.ExperimentCategoryOptions(params);
  experimentCategoryeList.value = experimentCategoryeList.value.concat(res);
};
const tagList = ref<any>([]);

const getExperimentListByClickCount = async () => {
  let params = {};
  const res: any = await API.ExperimentListByClickCount({ args: params });

  console.log(res);
  tagList.value = res;
};
const handleChoose = (data: any) => {
  inputStr.value = data.name;
  getExperimentPagedList();
};
const tableData = ref<any>([]);
//获取实验列表
const getExperimentPagedList = async () => {
  let params = {
    current: 1,
    pageSize: 8,
    keyword: inputStr.value,
    enabled: true,
    experiment_category_idArray:
      experimentCategoryValue.value != "全部"
        ? [experimentCategoryValue.value]
        : [],
  };
  const res: any = await API.ExperimentPagedList({ args: params });

  tableData.value = res.data;
  // console.log(tableData.value)
};
const handleClick = (index: number, id: number) => {
  if (tagActives.value.includes(id)) {
    tagActives.value = tagActives.value.filter((item) => item !== id);
  } else {
    tagActives.value.push(id);
  }
};
const handleGoLogin = () => {
  router.push(`login`);
};
onMounted(() => {
  getExperimentCategoryOptions();
  getExperimentListByClickCount();
  getExperimentPagedList();
});
</script>
<style lang="less" scoped>
.wiki-page {
  background-color: rgba(251, 251, 251, 1);
  position: relative;
  width: 100%;

  .block_1 {
    margin: 40px auto 0 auto;
    width: 1536px;

    .wiki-page-header {
      background-color: rgba(17, 101, 237, 1);
      border-radius: 20px;
      position: relative;
      width: 100%;
      height: 410px;
      overflow: hidden;

      .header-text-wrapper {
        width: 653px;
        height: 133px;
        margin: 70px 0 0 160px;

        .header-text-wrapper-text-top {
          width: 653px;
          height: 80px;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 70px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 80px;
        }

        .header-text-wrapper-text-botton {
          width: 629px;
          height: 42px;
          overflow-wrap: break-word;
          color: rgba(230, 240, 255, 1);
          font-size: 30px;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 42px;
          margin: 11px 0 0 5px;
        }
      }

      .image-wrapper_1 {
        height: 387px;
        background: url(lanhu/SketchPngcfac1d503df6426cbe1e8ce5b949e822855907c93c795cef09d58d2f2730f520.png)
          100% no-repeat;
        background-size: 100% 100%;
        width: 445px;
        margin: 23px 0 0 278px;

        .image_1 {
          width: 376px;
          height: 308px;
          margin: 28px 0 0 -89px;
        }
      }

      .block_2 {
        height: 410px;
        background: url(lanhu/SketchPng51d7477d2420d41a16b72ebbb2a6f9561648e00e90f3879815a90c964cd5cff7.png)
          100% no-repeat;
        background-size: 100% 100%;
        width: 564px;
        position: absolute;
        left: 0;
        top: 0;

        .image-wrapper_2 {
          width: 70px;
          height: 70px;
          margin: 75px 0 0 70px;

          .image_2 {
            width: 70px;
            height: 70px;
          }
        }

        .header-section {
          width: 394px;
          height: 30px;
          margin: 91px 0 0 165px;

          .text {
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(230, 240, 255, 1);
            font-size: 24px;
            font-family: PingFangSC-Light;
            font-weight: 300;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
          }

          .thumbnail {
            width: 1px;
            height: 12px;
            margin: 10px 20px 0 20px;
            background-color: rgba(230, 240, 255, 1);
          }
        }

        .section_2 {
          width: 148px;
          height: 48px;
          margin: 42px 0 54px 168px;
          cursor: pointer;

          .box_4 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 24px;
            width: 148px;
            height: 48px;

            .image-text_1 {
              width: 98px;
              height: 25px;
              margin: 11px 0 0 26px;

              .text-group_1 {
                width: 72px;
                height: 25px;
                overflow-wrap: break-word;
                color: rgba(17, 101, 237, 1);
                font-size: 18px;
                font-family: PingFangSC-Medium;
                font-weight: 500;
                text-align: left;
                white-space: nowrap;
                line-height: 25px;
              }

              .thumbnail_3 {
                width: 16px;
                height: 16px;
                margin-top: 5px;
              }
            }
          }
        }
      }
    }

    .search-box {
      width: 100%;
      height: 80px;
      background: #ffffff;
      box-shadow: 0px 8px 12px 0px rgba(17, 101, 237, 0.05);
      border-radius: 12px;
      border: 1px solid #e6ebf1;
      margin: 40px 0;
      overflow: hidden;

      .search-box-input-group {
        width: 100%;
        height: 100%;
        display: flex;

        .search-box-select {
          width: 200px;
          height: 100%;
          border: 0px;

          /deep/.ant-select-selector {
            height: 100%;
            border: 0px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22px;
            color: #262626;
            line-height: 80px;
            text-align: left;
            font-style: normal;

            .ant-select-selection-item {
              line-height: 80px;
              padding-left: 10px;
            }
          }
        }

        .search-box-input {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22px;
          line-height: 30px;
          text-align: left;
          font-style: normal;
          border: 0px;
        }

        .search-box-button {
          width: 168px;
          height: 80px;
          background: #1165ed;
          border-radius: 0px 12px 12px 0px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 26px;
          color: #ffffff;
          line-height: 37px;
          text-align: center;
          font-style: normal;
        }
      }
    }

    .tag-group {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .text-wrapper {
        background-color: rgba(247, 247, 247, 1);
        border-radius: 4px;
        height: 48px;
        margin-bottom: 16px;
        margin-right: 16px;
        cursor: pointer;

        .text {
          height: 28px;
          overflow-wrap: break-word;
          color: rgba(140, 140, 140, 1);
          font-size: 20px;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 28px;
          margin: 10px 16px 0 16px;
        }
      }

      .active {
        background-color: rgba(222, 235, 255, 1);

        .text {
          color: rgba(17, 101, 237, 1);
        }
      }
    }

    .text-wrapper_17 {
      width: 352px;
      height: 53px;
      margin: 54px 0 0 0px;

      .text_26 {
        width: 152px;
        height: 53px;
        overflow-wrap: break-word;
        color: rgba(38, 38, 38, 1);
        font-size: 38px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        text-align: right;
        white-space: nowrap;
        line-height: 53px;
      }

      .text_27 {
        width: 180px;
        height: 28px;
        overflow-wrap: break-word;
        color: rgba(89, 89, 89, 1);
        font-size: 20px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 28px;
        margin-top: 19px;
      }
    }

    .grid_1 {
      flex-wrap: wrap;
      margin: 44px 0 0 0;

      .list-items_1 {
        box-shadow: 0px 8px 12px 0px rgba(17, 101, 237, 0.05);
        background-color: rgba(255, 255, 255, 1);
        border-radius: 12px;
        width: 351px;
        height: 517px;
        cursor: pointer;
        margin: 0 44px 44px 0;

        // cursor: pointer;
        &:nth-child(4n) {
          margin-right: 0;
        }

        &:nth-last-child(-n + 4) {
          margin-bottom: 0;
        }

        .image-text_12 {
          width: 311px;
          height: 276px;
          margin: 20px 0 0 20px;

          .group_12 {
            border-radius: 12px;
            position: relative;
            width: 311px;
            height: 200px;
            overflow: hidden;

            img {
              height: 100%;
              width: 100%;
            }
          }

          .text-group_12 {
            width: 311px;
            min-height: 56px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 20px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            text-align: left;
            line-height: 28px;
            margin-top: 20px;
          }
        }

        .text-wrapper_35 {
          background-color: rgba(247, 247, 247, 1);
          border-radius: 12px;
          height: 100px;
          width: 311px;
          margin: 21px 0 0 20px;
          padding: 16px;
          box-sizing: border-box;

          .text_62 {
            // width: 279px;
            // height: 66px;
            // overflow-wrap: break-word;
            // color: rgba(140, 140, 140, 1);
            // font-size: 16px;
            // font-weight: normal;
            // text-align: left;
            // line-height: 22px;
            // margin: 16px 0 0 16px;
            width: 100%;
            height: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            /* 限制显示的行数 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 你的 padding 值 */

            /* 确保 padding 包含在高度计算中 */
            color: rgba(140, 140, 140, 1);
            font-size: 16px;
            font-weight: normal;
            text-align: left;
            line-height: 22px;
            overflow-wrap: break-word;
          }
        }

        .section_3 {
          width: 311px;
          height: 36px;
          margin: 40px 0 24px 20px;

          .image-text_13 {
            width: 136px;
            height: 36px;

            .label_9 {
              width: 36px;
              height: 36px;
            }

            .text-group_13 {
              width: 88px;
              height: 22px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 16px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 22px;
              margin-top: 7px;
            }
          }

          .text_63 {
            width: 9px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(255, 112, 36, 1);
            font-size: 14px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
            margin: 8px 0 0 104px;
          }

          .text_64 {
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(140, 140, 140, 1);
            font-size: 14px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
            margin: 8px 0 0 6px;
          }
        }
      }
    }

    .text-wrapper_36 {
      box-shadow: 0px 8px 12px 0px rgba(17, 101, 237, 0.05);
      background-color: rgba(17, 101, 237, 1);
      border-radius: 12px;
      height: 80px;
      width: 300px;
      margin: 94px auto 71px auto;
      cursor: pointer;

      .text_65 {
        width: 156px;
        height: 37px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 26px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        text-align: right;
        white-space: nowrap;
        line-height: 37px;
        margin: 22px 0 0 72px;
      }
    }
  }
}
</style>
